<template>
  <el-container>
    <el-header>
      <HelloWorld />
    </el-header>
    <el-main>
      <ColumList :list="list" />
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import ColumList, { ColumnProps } from '@/components/ColumList.vue'
const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'string',
    avatar: 'https://tresource.ymyimi.cn:9000/yimi-yidao-checkroll/banner/image/2021/12/24/38F492120A10442F8B0E92EDD4043D81.jpeg',
    description: 'jfierhfiroenfgirenjfiowe'
  },
  {
    id: 2,
    title: 'string',
    avatar: 'https://tresource.ymyimi.cn:9000/yimi-yidao-checkroll/banner/image/2021/12/24/38F492120A10442F8B0E92EDD4043D81.jpeg',
    description: 'jfierhfiroenfgirenjfiowe'
  },
  {
    id: 3,
    title: 'string',
    avatar: 'https://tresource.ymyimi.cn:9000/yimi-yidao-checkroll/banner/image/2021/12/24/38F492120A10442F8B0E92EDD4043D81.jpeg',
    description: 'jfierhfiroenfgirenjfiowe'
  },
  {
    id: 4,
    title: 'string',
    avatar: '',
    description: 'jfierhfiroenfgirenjfiowe'
  },
  {
    id: 5,
    title: 'string',
    avatar: 'https://tresource.ymyimi.cn:9000/yimi-yidao-checkroll/banner/image/2021/12/24/38F492120A10442F8B0E92EDD4043D81.jpeg',
    description: 'jfierhfiroenfgirenjfiowe'
  }
]
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
    ColumList
  },
  setup () {
    const router = useRouter()
    onMounted(() => {
      console.log(router.currentRoute.value.query.id) // 获取传入的参数
    })
    return {
      list: testData
    }
  }
})
</script>
<style lang="scss">
.el-container {
  height: 100%;
  .el-header {
    height: 100px;
    background-color: aqua;
  }
  .el-main {
    bottom: 0;
    height: 100%;
    background-color: #f0f8f8;
  }
}
</style>
